Skip to main content

4、Button以及跳转

本章将介绍如何使用各种Button。

  • Button
  • EditButton
  • PasteButton
  • NavigationView
  • NavigationLink

Getting ready​

首先，新建一个ButtonsApp的SwiftUI工程。

How to do it…​

  1. 新建文件
  2. 模板选择SwiftUI View
  3. 输入名称ButtonView
  4. 重复上面步骤，创建EditButtonView
  5. 重复上面步骤，创建PasteButtonView
  6. 重复上面步骤，创建MenuButtonView，(MenuButton已经弃用了，使用Menu)
  7. 打开ContentView.swift，在body中添加一个NavigationView
NavigationView {
    VStack {
        NavigationLink(destination: ButtonView()) {
            Text("Buttons").padding()
        }
        NavigationLink(destination: EditButtonView()) {
            Text("EditButtons").padding()
        }
        NavigationLink(destination: MenuButtonView()) {
            Text("MenuButtons").padding()
        }
        NavigationLink(destination: PasteButtonView()) {
            Text("PasteButtons").padding()
        }
        NavigationLink(destination:
            Text("Very long text that should not be displayed in a single line because it is not good design")
                .padding()
                .navigationBarTitle(Text("Detail"))
        ) {
            Text("details about text").padding()
        }
}.navigationBarTitle(Text("Main View"), displayMode:.inline)

最终显示如下：

image-20211222163022220

  1. 打开EditButtonView.swift，添加下面的代码，实现EditButton。
struct EditButtonView: View {
    @State private var animals = ["Cats", "Dogs", "Goats"]
    var body: some View {
        NavigationView {
            List {
                ForEach(animals, id: \.self) { animal in
                    Text(animal)
                }.onDelete(perform: removeAnimal)
            }
        }.navigationBarItems(trailing: EditButton())
        .navigationBarTitle(Text("EditButtonView"), displayMode: .inline)
    }
    
    func removeAnimal(at offsets: IndexSet){
        animals.remove(atOffsets: offsets)
    }
}

最终得到，点击右上角的Edit按钮，List会进入编辑状态。

20211222164221

  1. 打开MenuButtonView.swift， 添加以下代码
var body: some View {
    Text("MenuButtons are currently available on MacOS currently")
  .padding()
  .navigationBarTitle("MenuButtons", displayMode:.inline)

/*
MenuButton("country +") {
Button("USA") { print("Selected USA") }.background(Color.accentColor)
Button("India") { print("Selected India") }
}
*/
}

  1. 打开PasteButtonView.swift，添加以下代码
struct PasteButtonView: View {
    var body: some View {
        VStack {
            Text("PasteButton controls how you paste in macOS but is not available in iOS. For more information, check the \"See also\" section of this recipe")
                .padding()
        }.navigationBarTitle("PasteButton", displayMode: .inline)
    }
}

How it works…​

NavigationLink必须放在NavigationView里使用。

NavigationLink 需要两个参数destination 和 label。destination代表点击后跳转的View。label代表显示的内容。

.navigationBarTitlemodifier给ContentView界面添加了个title。第一个参数指定title的内容，第二个参数指定title显示的模式。.inline代表在标准的navigationBar中显示。

其他几个界面也有指定.navigationBarTitle，但是在preview中不会显示，在运行时才会显示。

EditButton和List一起使用，让List可编辑。我们之后再学习List。

MenuButtons和PasteButtons只能在macOS中使用。MenuButtons已被弃用，可以不用看了。

PasteButton可参考官方文档中的例子。